<template>
  <div class="box1">
    <div class="box2">
      <button class="zhe" @click="flag = !flag">折叠按钮</button>
      <button class="tui" @click="fn">退出坦克</button>
    </div>
    <div class="box3">
      <div :class="['left', flag ? '' : 'swe']">
        <button><router-link to="/First">first</router-link></button>
        <button><router-link to="/Second?id=2">second</router-link></button>
        <button><router-link to="/Third/3">third</router-link></button>
        <button><router-link to="/Forth/4?id=3">forth</router-link></button>
      </div>
      <div class="ro">
        <router-view></router-view>
      </div>
    </div>
    <div class="box4">坦克底部</div>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      flag: true
    }
  },
  created () {
  },
  computed: {
  },
  activated () {
    console.log('activated');
  },
  deactivated () {
    console.log('deactivated');
  },
  methods: {
    fn () {
      this.$router.push('/Deng')
    }
  }
}
</script>
<style lang='less'  scoped>
.box1 {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .box2 {
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: 5px solid #000;
    .tui {
      background-color: yellow;
    }
    h1 {
      flex: 1;
      line-height: 100px;
      text-align: center;
    }
  }
  .box3 {
    display: flex;
    justify-content: space-between;
    border: 5px solid pink;
    width: 100%;
    height: 400px;
    .left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border: 2px solid #000;
      background-color: yellow;
    }
    .ro {
      flex: 1;
      text-align: center;
      border: 2px solid yellowgreen;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: yellowgreen;
    }
  }
  .box4 {
    border: 5px solid pink;
    height: 100px;
    background-color: pink;
  }
}

a {
  display: block;
  background-color: pink;
}
.bb {
  background-color: red;
}
.swe {
  width: 0px;
}
</style>
